<!--
 * @Descripttion: 订单管理
 * @version:
 * @Author: 赵致喜
 * @Date: 2020-10-12 18:48:41
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-26 19:07:10
-->
<template>
	<div class="organization">
		<el-form label-position="'right'" label-width="120px" label-suffix=":">
			<el-col :span="6">
				<el-form-item label="项目经理姓名">
					<el-input type="text" v-model="searchFormData.mangerName" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="供应商名称">
					<el-input type="text" v-model="searchFormData.supplierName" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-button @click="refreshControlHandle" style="float: right;margin-left: 10px;margin-bottom: 10px;">重置
				</el-button>
				<el-button @click="searchControlHandle" style="float: right;">查询</el-button>
				<!-- <el-button @click="addContrlHandle" style="float: right;">新增</el-button> -->
			</el-col>
		</el-form>
		<div class="table-box">
			<el-table :data="tableData" border  @selection-change="handleSelectionChange"
				height="calc(100vh - 205px)">
				<el-table-column type="selection" width="50" fixed="left"></el-table-column>
				<el-table-column label="序号" width="50" fixed="left">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="supplierName" label="供应商名称">
					<template slot-scope="scope">
						{{scope.row.supplierName}}
					</template>
				</el-table-column>
				<el-table-column prop="mangerName" label="项目经理姓名">
					<template slot-scope="scope">
						{{scope.row.mangerName}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250" fixed="right">
				  <template slot-scope="scope">
				    <el-button type="primary" size="mini" @click="openDialogEdit(scope.row)">
				      编辑
				    </el-button>
				  </template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
				style="text-align: right;">
			</el-pagination>
		</div>

		<el-dialog :title="personTitle" :visible.sync="personDialogShow" width="500px">
			<el-form label-position="'right'" label-width="120px" label-suffix=":">
				<el-form-item label="供应商">
					<el-select v-model="dict.orgId" placeholder="请选择供应商" filterable clearable @change="chooseSupplier">
					  <el-option
					  v-for="item in supplierList"
					  :key="item.id"
					  :label="item.name"
					  :value="item.id">
					  </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="项目经理">
					<el-select v-model="dict.userId" placeholder="请选择项目经理" filterable clearable @change="chooseManager">
					  <el-option
					  v-for="item in manegerList"
					  :key="item.userId"
					  :label="item.name"
					  :value="item.userId">
					  </el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="personDialogShow = false">取 消</el-button>
				<el-button type="primary" @click="submitHandle()">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import {
		findMangerSupplierList,
		setReceivingStatus,
		getUser,
		getTreceipt,
		getOrgLazyTree,
		
		findOrgList,
		findMangerList,
		setMangerByUser
	} from '@/api/admin.api'
	import moment from 'moment'
	export default {
		name: 'supplierReconciliation',
		data() {
			return {
				searchFormData: {
					supplierName:"",
					mangerName:""
				},
				tableData: [],
				// 分页数据
				pageData: {
					// 当前分页
					pageNum: 1,
					// 分页条数
					pageSize: 10,
					// 数据总数
					total: 0,
				},
				dict:{
					supplierName:"",
					orgId:"",
					mangerName:"",
					userId:""
				},
				supplierList:[],
				manegerList:[],
				// 表格选中数据
				tableSelectData: [],
				personDialogShow: false,
				personTitle:"",
				id:""
			}
		},
		methods: {
			chooseSupplier(t){
				this.dict.orgId = t;
			},
			chooseManager(t){
				this.dict.userId = t;
			},
			openDialogEdit(row){
				this.id = row.id;
				this.dict.orgId = row.orgId;
				this.dict.userId = row.userId;
				this.personTitle = "修改";
				this.personDialogShow = true;
			},
			addContrlHandle(){
				this.personTitle = "新增";
				this.personDialogShow = true;
			},
			submitHandle() {
				this.supplierList.forEach(item=>{
					if(item.id == this.dict.orgId){
						this.dict.supplierName = item.name;
					}
				})
				this.manegerList.forEach(item=>{
					if(item.userId == this.dict.userId){
						this.dict.mangerName = item.name;
					}
				})
				this.dict.id = this.id;
				setMangerByUser(this.dict).then((res) => {
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					this.getTableData();
					this.personDialogShow = false;
				})
			},
			// 检索订单管理列表
			searchControlHandle() {
				this.getTableData()
			},
			handleSizeChange(val) {
				this.pageData.pageSize = val
				this.getTableData()
			},
			handleCurrentChange(val) {
				this.pageData.pageNum = val
				this.getTableData()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val)
			},
			
			// 重置搜索条件
			refreshControlHandle() {
				this.searchFormData = {
					supplierName:"",
					mangerName:""
				}
				this.getTableData();
			},
			// 请求订单管理列表
			getTableData() {
				const newSearch = {
					supplierName:this.searchFormData.supplierName,
					mangerName:this.searchFormData.mangerName,
					...this.pageData,
				}
				console.log(newSearch);
				findMangerSupplierList(newSearch).then((res) => {
					let tableData = res.rows;
					this.tableData = tableData;
					this.pageData.total = res.total;
				})
			},
			getOrgList(t){
				findOrgList().then((res) => {
					this.supplierList = res;
				})
			},
			getManagerList(t){
				findMangerList().then((res) => {
					this.manegerList = res;
				})
			},
		},
		created() {},
		mounted() {
			this.getTableData();
			this.getOrgList();
			this.getManagerList();
		},
	}
</script>
